<template>
	<view class="pages-box rel">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="师傅升级" leftIcon="icon-left" color="#ffffff"
			:backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		<view class="apply-form">
			<view class="fill-base">
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">姓名</view>
					<input v-model="form.nickname" type="text" class="item-input flex-1"
						:class="[{'text-bold':form.nickname}]" maxlength="10" placeholder-class="c-caption"
						:placeholder="rule[1].errorMsg" />
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">性别</view>
					<view class="item-input text flex-y-center">
						<view @tap.stop="form.sex = index" class="flex-y-center" :class="[{'mr-lg':index==0}]"
							:style="{color:form.sex == index ? primaryColor:''}" v-for="(item,index) in ['男','女']"
							:key="index"><i class="iconfont icon-xuanze mr-sm"
								:class="[{'icon-radio-fill':form.sex == index}]"></i>{{item}}
						</view>
					</view>
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">手机号</view>
					<input v-model="form.mobile" type="text" class="item-input flex-1"
						:class="[{'text-bold':form.mobile}]" :placeholder="rule[1].errorMsg" />
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">手机验证码</view>
					<input v-model="form.mobile" type="text" class="item-input flex-1"
						:class="[{'text-bold':form.mobile}]" :placeholder="rule[1].errorMsg" />
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">工作城市</view>
					<view class="item-input text">
						<picker @change="pickerChange($event,'city')" :value="cityIndex" :range="cityList"
							range-key="title">
							<view class="flex-y-center"
								:class="[{'c-caption':cityIndex==-1},{'text-bold':cityIndex!=-1}]">
								{{cityIndex!=-1?cityList[cityIndex].title:'请选择'}}
								<i class="iconfont icongengduo ml-sm"></i>
							</view>
						</picker>
					</view>
				</view>
				<view class="flex-warp ml-lg mr-lg">
					<view class="item-input text" style="width:200rpx;text-align: left;">所在地址
					</view>
					<view class="item-input text flex-1">
						<view @tap.stop="toChooseLocation" class="flex-y-center">
							<view class="flex-1 text-right" :class="[{'text-bold':form.address}]">
								{{form.address || `点击右边图标设置`}}
							</view><i class="iconfont iconxiangdaodaoda ml-sm" :style="{color: primaryColor}"></i>
						</view>
					</view>
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">服务分类</view>
					<view class="item-input text">
						<picker @change="pickerChange($event,'city')" :value="cityIndex" :range="cityList"
							range-key="title">
							<view class="flex-y-center"
								:class="[{'c-caption':cityIndex==-1},{'text-bold':cityIndex!=-1}]">
								{{cityIndex!=-1?cityList[cityIndex].title:'请选择'}}
								<i class="iconfont icongengduo ml-sm"></i>
							</view>
						</picker>
					</view>
				</view>
			</view>
			
			<view class="fill-base mt-md pb-lg">
				<view class="flex-between ml-lg mr-lg ">
					<view class="item-text">师傅简介</view>
					<input :disabled="true" type="text" class="item-input flex-1" />
				</view>
				<view class="textarea-box ml-lg mr-lg radius-16">
					<textarea v-model="form.text" class="item-textarea pd-lg f-paragraph c-title"
						:class="[{'text-bold':form.text}]" maxlength="300" :placeholder="rule[4].errorMsg"
						placeholder-class="c-caption" />
					<view class="text-right f-paragraph pb-lg pr-lg" style="color:#C8CDD3">
						{{form.text.length>300?300:form.text.length}}/300
					</view>
				</view>
			</view>
			
			<view class="fill-base mt-md">
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">身份证号</view>
					<input v-model="form.id_code" type="text" class="item-input flex-1"
						:class="[{'text-bold':form.id_code}]" :placeholder="rule[5].errorMsg" />
				</view>
				<view class="flex-between ml-lg mr-lg">
					<view class="item-text">身份证照片</view>
					<view class="item-input tips flex-1"></view>
				</view>
				<view class="flex-between ml-lg mr-lg pb-md">
					<upload @upload="imgUpload" :imagelist="form.id_card" imgtype="id_card" imgclass="md"
						text="身份证人像面" :imgsize="1" :pictureSize="5"></upload>
					<upload @upload="imgUpload" :imagelist="form.id_card_fan" imgtype="id_card_fan" imgclass="md"
						text="身份证国徽面" :imgsize="1" :pictureSize="5"></upload>
				</view>
				<view class="flex-between ml-lg mr-lg ">
					<upload @upload="imgUpload" :imagelist="form.id_card_people" imgtype="id_card_people"
						imgclass="md" text="手持身份证照片" :imgsize="1" :pictureSize="5"></upload>
				</view>
				<view class="item-input tips flex-1 ml-lg mr-lg" style="padding: 20rpx 0 20rpx 0">图片上传大小不超过5M
				</view>
			</view>
			
			<view class="fill-base mt-md">
				<view class="flex-between ml-lg mr-lg">
					<view class="item-text">资质证书</view>
					<view class="item-input tips flex-1"></view>
				</view>
				<view class="flex-between ml-lg mr-lg ">
					<upload @upload="imgUpload" :imagelist="form.work_img" imgtype="work_img" text="上传图片"
						:imgsize="1" :pictureSize="5">
					</upload>
				</view>
				<view class="item-input tips flex-1 ml-lg mr-lg" style="padding: 0 0 20rpx 0;">图片建议尺寸: 216 * 216，图片上传大小不超过5M
				</view>
			</view>
			<view class="fill-base mt-md">
				<view class="flex-between ml-lg mr-lg">
					<view class="item-text" style="width: auto;">实拍照片</view>
					<view class="item-input tips flex-1"></view>
				</view>
				<view class="flex-between ml-lg mr-lg ">
					<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.model_img" filetype="picture"
						imgtype="model_img" text="上传图片" :imgsize="9" :pictureSize="5">
					</upload>
				</view>
				<view class="item-input tips flex-1 ml-lg mr-lg" :class="[{'mt-md': !(form.model_img.length % 3)}]" style="padding: 0 0 20rpx 0;">图片建议尺寸: 216 * 216，图片上传大小不超过5M
				</view>
			</view>
			
		</view>

		<view class="space-max-footer"></view>
				
		<fix-bottom-button @confirm="submit" borderRadius="8rpx" :text="[{text:'确认提交',type:'confirm',isAuth:false}]" bgColor="#fff">
		</fix-bottom-button>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import tabbar from "@/components/tabbar.vue"

	export default {
		components: {
			tabbar
		},
		data() {
			return {
				rule: [{
						name: "nickname",
						checkType: "isNotNull",
						errorMsg: "请输入您的姓名",
						regType: 2
					}, {
						name: "mobile",
						checkType: "isMobile",
						errorMsg: "请输入手机号"
					},
					{
						name: "city_id",
						checkType: "isNotNull",
						errorMsg: "请选择意向工作城市"
					}, {
						name: "address",
						checkType: "isNotNull",
						errorMsg: "请选择所在地址"
					},
					{
						name: "text",
						checkType: "isNotNull",
						errorMsg: "请输入师傅简介",
						regType: 2
					},
					{
						name: "id_code",
						checkType: "isIdCard",
						errorMsg: "请输入您的身份证号码"
					},
					{
						name: "id_card",
						checkType: "isNotNull",
						errorMsg: "请上传身份证人像面"
					},
					{
						name: "id_card_fan",
						checkType: "isNotNull",
						errorMsg: "请上传身份证国徽面"
					},
				],
				form: {
					nickname: '',
					sex: 0, //性别 
					mobile: '',
					city_id: '',
					address: '',
					lng: '',
					lat: '',
					text: '',
					id_code: ''
				},
				cityIndex: -1,
				cityList: [{
					title: '成都',
					id: 1
				}]
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo
		}),
		async onLoad(options) {
			this.initIndex()
		},
		async onShow() {},
		async onReachBottom() {},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh) {
					this.getConfigInfo()
				}
			},
			pickerChange(e, key) {
				let val = e.target.value
				this.cityIndex = val
				this.form.city_id = this.cityList[this.cityIndex].id
			},
			// 选择地区
			async toChooseLocation(e) {
				await this.$util.checkAuth({
					type: 'userLocation'
				})
				let {
					lat: locaLat = '',
					lng: locaLng = ''
				} = this.location
				let {
					id = 0,
						lat: addrLat,
						lng: addrLng
				} = this.form
			
				if (id) {
					locaLat = addrLat
					locaLng = addrLng
				}
			
				let param = {}
				if (!locaLat && !locaLng) {
					// #ifdef H5
					if (this.$jweixin.isWechat()) {
						this.$util.showLoading()
						await this.$jweixin.wxReady2();
						let {
							latitude,
							longitude
						} = await this.$jweixin.getWxLocation()
						locaLat = latitude
						locaLng = longitude
					}
					// #endif
					// #ifdef APP-PLUS
					let location = await this.$util.getBmapLocation()
					locaLat = location.lat
					locaLng = location.lng
					// #endif
				}
			
				// #ifndef MP-WEIXIN
				param = {
					latitude: locaLat,
					longitude: locaLng
				}
				// #endif
			
				let [, {
					address = '',
					longitude,
					latitude
				}] = await uni.chooseLocation(param);
				if (!address) return
				this.form.address = address
				this.form.lng = longitude
				this.form.lat = latitude
			},
		},
	}
</script>


<style lang="scss">
	.pages-box {
		.apply-form {
			.item-text {
				font-size: 32rpx;
			}

			.item-input {
				padding: 25rpx 0;
				font-size: 32rpx;
				color: #222;
				min-height: 76rpx;
				line-height: 40rpx;
				text-align: right;

				.iconfont {
					font-size: 40rpx
				}

				.icongengduo {
					font-size: 24rpx;
					color: #9B9B9B;
				}
			}

			.item-input.text {
				padding: 42rpx 0;
			}

			.item-input.tips {
				text-align: left;
				font-size: 26rpx;
				color: #999;
			}

			.textarea-box {
				width: 690rpx;
				background: #F7F8FA;

				.item-textarea {
					color: #333;
					height: 280rpx;
				}
			}

			.icongengduo {
				font-size: 24rpx;
				color: #9B9B9B;
			}

			.service-list {
				.list-item {
					min-width: 168rpx;
					height: 68rpx;
					padding: 0 20rpx;
					color: #4A4A4A;
					background: #F6F7F8;
					border-radius: 34rpx;
				}

				.list-item.abs {
					opacity: 0.1;
					border-radius: 34rpx;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 1;
				}
			}
		}
	}
</style>
